import React, { useState, useEffect, useMemo } from "react";
import { useNavigate, useLocation, useParams } from "react-router-dom";
import { Toast, NavBar ,CountDown } from "react-vant";
import moment from "moment";
import useCountdown from "../components/Countdown";
type Props = {};

const Od = (props: Props) => {
  const navigate = useNavigate();
  const location = useLocation();
  const params = useParams();
  const [flog, setFlog] = useState(true);
  useEffect(() => {
    console.log(location.state.teg);
  }, []);
  const deadline = useMemo(
    () =>
      moment()
        .add(4, "s")
        .add(1, "m")
        .add(1, "h")
        .add(1, "d")
        .format("YYYY-MM-DD HH:mm:ss"),
    []
  );
  const { day, hour, minute, second } = useCountdown({
    // deadline: '2021-04-22 17:49:00',
    deadline: "2023-04-27",
  });

  return (
    <div className="ods">
      <header>
        <div className="header_top">
          <NavBar
            title="订单详情"
            leftText="返回"
            onClickLeft={() => navigate("/home/cfig")}
          />
        </div>
        <div className="header_nr">
          <b
            className={location.state.teg === "出票成功" ? "active1" : "active"}
          >
            {location.state.teg}
          </b>
          <span>{`${hour}时${minute}分${second}秒`}</span>
        </div>
        {location.state.teg === "出票成功" ? (
          <div className="header_box">
            <div className="header_box_box">
              <div className="header_box_box_1">取票号:BW123456</div>
              <div className="header_box_box_2">
                <span>04月26日 周三</span>
                <span>04月26日 周三</span>
              </div>
              <div className="header_box_box_3">
                <div>
                  <p style={{ fontSize: "24px" }}>06:21</p>
                  <p>合肥南</p>
                </div>
                <div>
                  <p
                    style={{
                      border: "solid 1px #666",
                      borderRadius: "5px",
                      display: "flex",
                      alignItems: "center",
                    }}
                  >
                    -经停信息-
                  </p>
                  <p>G7740</p>
                </div>
                <div>
                  <p style={{ fontSize: "24px" }}>07:21</p>
                  <p>合肥南</p>
                </div>
              </div>
              <div className="header_box_box_4">
                <div>
                  <p>
                    {location.state.name}{" "}
                    <span
                      style={{ border: "solid 1px #666", fontSize: "12px" ,marginLeft:"5px"}}
                    >
                      {location.state.plx}
                    </span>
                  </p>
                  <p style={{ color: "#666" }}>{location.state.sfzh}</p>
                  <p style={{ color: "green", fontSize: "12px" }}>
                    {location.state.teg}
                  </p>
                </div>
                <div>
                  <p>
                    {location.state.dz}￥{location.state.price}
                  </p>
                  <p>
                    <span
                      style={{
                        border: "solid 1px green",
                        fontSize: "12px",
                        color: "green",
                        marginRight:"5px"
                      }}
                    >
                      {location.state.zwys}
                    </span>
                    {location.state.number}
                  </p>
                </div>
              </div>
            </div>
          </div>
        ) : (
          <div className="header_box">
            <div className="header_box_box">
              <div className="header_box_box_1">取票号:BW123456</div>
              <div className="header_box_box_2">
                <span>04月26日 周三</span>
                <span>04月26日 周三</span>
              </div>
              <div className="header_box_box_3">
                <div>
                  <p style={{ fontSize: "24px" }}>06:21</p>
                  <p>合肥南</p>
                </div>
                <div>
                  <p
                    style={{
                      border: "solid 1px #666",
                      borderRadius: "5px",
                      display: "flex",
                      alignItems: "center",
                    }}
                  >
                    -经停信息-
                  </p>
                  <p>G7740</p>
                </div>
                <div>
                  <p style={{ fontSize: "24px" }}>07:21</p>
                  <p>合肥南</p>
                </div>
              </div>
              <div className="header_box_box_4">
                <div>
                  <p>
                    {location.state.name}{" "}
                    <span
                      style={{ border: "solid 1px #666", fontSize: "12px" ,marginLeft:"5px"}}
                    >
                      {location.state.plx}
                    </span>
                  </p>
                  <p style={{ color: "#666" }}>{location.state.sfzh}</p>
                  <p style={{ color: "red", fontSize: "12px" }}>
                    {location.state.teg}
                  </p>
                </div>
                <div>
                  <p>
                    {location.state.dz}￥{location.state.price}
                  </p>
                  <p>
                    <span
                      style={{
                        fontSize: "12px",
                        color: "green",
                        marginRight:"5px"
                      }}
                      className={
                        location.state.zwys === "靠窗" ? "active4" : "active3"
                      }
                    >
                      {location.state.zwys}
                    </span>
                    {location.state.number}
                  </p>
                </div>
              </div>
            </div>
          </div>
        )}
      </header>
      <main>
        <div className="main_box">
          <div className="main_top">
            <div> 
              <p>订单号</p>
              <p>E98466532</p>
            </div>
            <div> 
              <p>通知手机</p>
              <p>3345678986</p>
            </div>
          </div>
          <div className="main_bottom">
          <div> 
              <p>订单号</p>
              <p>E98466532</p>
            </div>
            <div> 
              <p>通知手机</p>
              <p>3345678986</p>
            </div>
          </div>
        </div>
      </main>
      <footer>
      {
          location.state.teg==="待支付"?<button>去支付</button>:location.state.teg==="出票成功"?"":<button>重新订购</button>
      }
<CountDown time={  60 * 60 * 1000} />
      </footer>
    </div>
  );
};

export default Od;
